<template>
    <view>
        <!-- components/videoSwiper/index.wxml -->
        <swiper style="height: 420rpx" :autoplay="true" :circular="true">
            <block v-for="(banner, index) in banners" :key="index">
                <swiper-item>
                    <view v-if="banner.isVideo" style="position: relative" @tap="onBannerClick" :data-banner="banner">
                        <video :show-center-play-btn="false" :controls="false" :src="banner.value" style="width: 750rpx; height: 420rpx" @play="onPlay" @ended="onEnded"></video>
                        <image class="play_icon" src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/icon/play.png"></image>
                    </view>
                    <block v-else>
                        <van-image :src="banner.value" fit="fill" width="750rpx" height="420rpx" @tap.native="onBannerClick($event, { banner })" :data-banner="banner" />
                    </block>
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>

<script>
// components/videoSwiper/index.js
export default {
    data() {
        return {
            banners: [],

            banner: {
                isVideo: '',
                value: ''
            }
        };
    },
    mixins: [require('miniprogram-computed').behavior],
    computed: {
        banners(data) {
            let banners = [];
            if (data.detail.videoUrlList) {
                banners = banners.concat(
                    data.detail.videoUrlList.map((item) => {
                        return {
                            isVideo: true,
                            value: item
                        };
                    })
                );
            }
            if (data.detail.picUrlList) {
                banners = banners.concat(
                    data.detail.picUrlList.map((item) => {
                        return {
                            isVideo: false,
                            value: item
                        };
                    })
                );
            }
            return banners;
        }
    },
    props: {
        detail: {
            type: Object,
            default: () => ({
                videoUrlList: [],
                picUrlList: []
            })
        }
    },
    methods: {
        onBannerClick(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let banner = e.currentTarget.dataset.banner;
            console.log(banner);
            if (banner.isVideo) {
                uni.navigateTo({
                    url: '/pages/video/index?url=' + banner.value
                });
            } else {
                uni.previewImage({
                    urls: this.detail.picUrlList,
                    current: banner.value
                });
            }
        },

        onPlay() {
            console.log('占位：函数 onPlay 未声明');
        },

        onEnded() {
            console.log('占位：函数 onEnded 未声明');
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
